<template>
  <div class="c">
      <div class="leftimg">
          <img :src="musiclist.coverImgUrl" alt="">
      </div>
      <div class="righttxt">
          <h3>{{musiclist.name}}</h3>
          <div>
              <img :src="musiclist.creator.avatarUrl" alt="" class="touxiang">
              <span class="songername">  {{musiclist.creator.nickname}}</span> 
          </div>
          <p>简介：{{musiclist.description}}</p>
      </div>
      <div class="bottomlist">
        <ul v-for="(item,index) in list" :key="index">
            <li @click="play(item.id)">{{item.name}} </li>
        </ul>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            musiclist:[],
            list:[]
        }
    },
    methods:{
          play(id){
       axios({
            url:'https://autumnfish.cn/song/url',
            method:'get',
            params:{
                id
            }
        }).then(res=>{
            // console.log(res);
            this.$store.state.url=res.data.data[0].url
        })
    }
    },
    created(){
        // 通过传过来？q=‘’的值来获取歌单详细信息
        axios({
            url:'https://autumnfish.cn/playlist/detail',
            method:'get',
            params:{
                id:this.$route.query.q
            }
        }).then(res=>{
            console.log(res);
            this.musiclist=res.data.playlist
            this.list=res.data.playlist.tracks
        })
    }
}
</script>

<style>
.c{
   
    margin: 30px 50px;
}
.leftimg{
    float: left;
    width: 200px;
    height: 200px;
    background-color: aqua;
    margin: 0 30px;
}
.leftimg img{
    width: 100%;
    height: 100%;
}
.righttxt{
    float: left;
}
.bottomlist{
    clear:both;
    position: relative;
    top: 30px;
}
.touxiang{
    width: 30px;
    height: 30px;
    margin: 10px 10px 0 0;
    border-radius:70%;
}
.songername{
    color: rgb(50, 216, 238);
    font-family: '楷体';
    position: relative;
    top: -8px;
}
p{
   width: 800px;
}
</style>